import type {Directive,DirectiveBinding,VNode,App} from 'vue'

const vSelfTrim:Directive = {
  // 在绑定元素的 attribute 前
  // 或事件监听器应用前调用
  // created(el:HTMLInputElement,binding:DirectiveBinding,vnode) {
    // 下面会介绍各个参数的细节
  // },
  // 在元素被插入到 DOM 前调用
  // beforeMount(el:HTMLInputElement,binding:DirectiveBinding,vnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都挂载完成后调用
  // mounted(el:HTMLInputElement,binding:DirectiveBinding,vnode) {},
  // 绑定元素的父组件更新前调用
  // beforeUpdate(el:HTMLInputElement,binding:DirectiveBnding,vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都更新后调用
  updated(el:HTMLInputElement,binding:DirectiveBinding,vnode:VNode){
    console.log(el,binding,vnode)
    el.value=el.value.trim()
    console.log(el.value,'>>>>')
  },
  // 绑定元素的父组件卸载前调用
  // beforeUnmount(el:HTMLInputElement,binding:DirectiveBinding,vnode) {},
  // 绑定元素的父组件卸载后调用
  // unmounted(el:HTMLInputElement,binding:DirectiveBinding,vnode) {},

}


export default function(app:App){
  app.directive('selfTrim',vSelfTrim)
  // app.directive('selfTrim', {
  //   mounted(el:HTMLInputElement,binding:DirectiveBinding,vnode) {
  //     console.log(el,binding,vnode)
  //     el.value=el.value.trim()
  //     console.log(el.value,'>>>>')
  //   }
  // })
}
